import React, { useEffect } from 'react';
import { NavLink, Link, withRouter } from 'react-router-dom'

import { Layout, Breadcrumb, Menu, Icon, Row, Col, BackTop } from 'antd';
// import { from } from 'rxjs';
import NavLeft from '../components/adminLayout/NavLeft'
import Header from '../components/adminLayout/Header'
import Footer from '../components/adminLayout/Footer'
import Home from '../components/adminLayout/Home'
import menuTreeData from '../config/router.config'
import PubSub from 'pubsub-js';
import 'antd/dist/antd.css';
// // import {connect} from 'react-redux'
// import '../style/common.less'
//----------------------------------------------------------------------------------------------------------------------------------
// import qs from 'qs';         //或者是querystringify
//todo kim-stamp qs用来解析     var obj = qs.parse('a=c'); assert.deepEqual(obj, { a: 'b' }   var str = qs.stringify(obj);  assert.equal(str, 'a=c');
//todo qs.parse('foo=bar&bar=foo') --->{ foo: 'bar', bar: 'foo' }    qs.parse('foo&bar=foo') ---> { foo: '', bar: 'foo' }    qs.stringify({ foo: bar });       // foo=bar
// qs.stringify({ foo: bar }, true); ---> ?foo=bar
// qs.stringify({ foo: bar }, '&');  ---> &foo=bar
// qs.stringify({ foo: '' }, '&');   ---> &foo=
//----------------------------------------------------------------------------------------------------------------------------------
const { Sider, Content, Header: AntdHeader } = Layout;
const { SubMenu } = Menu

//----------------------------------------------------------------------------------------------------------------------------------
//todo kim-stamp 面包屑路由映射
var breadcrumbNameMap = {}
function ergodic(data) {
  data.map(item => {
    if (item.routes) {
      ergodic(item.routes)
    }
    return breadcrumbNameMap[item.path] = item.name
  })
}
ergodic(menuTreeData)

//todo kim-stamp 面包屑遍历拼接
const KimBreadcrumb = withRouter(props => {
  const pathSnippets = props.location.pathname.split('/').filter(i => i);  //.filter(i => i) 过滤Kim数组中空值
  const extraBreadcrumbItems = pathSnippets.map((_, index) => {
    const url = `/${pathSnippets.slice(0, index + 1).join('/')}`;
    return (<Breadcrumb.Item key={url}> <Link to={url}>{breadcrumbNameMap[url]}</Link> </Breadcrumb.Item>);
  });
  return [<Breadcrumb.Item key="home"> <Link to="/"> <Icon type="home" /> <span>首页</span></Link> </Breadcrumb.Item>].concat(extraBreadcrumbItems)
});
//----------------------------------------------------------------------------------------------------------------------------------




class BasicLayout extends React.Component {

  state = { collapsed: false, SelectedKeys: ["/home"], LayoutName: "1" }

  componentWillMount() {
    let self = this
    PubSub.subscribe('submit', function (dataname, data) {
      console.log(data, "datanamedataname");

      self.setState({
        LayoutName: data.name
      });
    });



    if (this.props.location.pathname == "/") {
      this.props.history.push({ pathname: "/home" })
    }  //TODO 重定向

    this.setState({
      breadcrumbData: this.props.location.pathname && this.props.location.pathname.replace("/", "").split("/"),
    })
    this.props.history.listen(route => {
      this.setState({
        breadcrumbData: route.pathname.replace("/", "").split("/"),
        SelectedKeys: [route.pathname]
      })
    })
  }

  handleToggle = () => {
    this.setState({ collapsed: !this.state.collapsed, });
  };




  render() {

    const dfkdfjdk = () => {
      const { breadcrumbData } = this.state
      let menuFilterData = menuTreeData.filter(item => item.path == "/" + this.state.breadcrumbData[0])
      const renderMenu = (menudata) => {
        return menudata.map((item) => {
          //     //头部鼠标悬停 『无下拉』
          // return <Menu.Item title={item.name}
          //     onClick={(e) => this.setState({ firstLevelPath: item.routes ? item.routes[0].path : item.path })}
          //     key={item.path} >
          //     <NavLink to={item.routes ? item.routes[0].path : item.path}>{item.routes ? <Icon type={item.icon} /> : null} <span>{item.name}</span></NavLink>
          // </Menu.Item>

          //头部鼠标悬停 『下拉』
          if (item.hideInMenu) return null;
          return !item.routes ?
            <Menu.Item title={item.name} key={item.path} ><NavLink to={item.path}><span>{item.name}</span></NavLink></Menu.Item> :
            <SubMenu onTitleClick={(e) => { this.setState({ firstLevelPath: e.key }) }} title={<span> <Icon type={item.icon} />
              <Link to={item.routes[0].path} style={{ color: 'rgba(255, 255, 255, 0.65)' }}>{item.name}</Link></span>} key={item.path}>
              {renderMenu(item.routes)}
            </SubMenu>
        })
      }

      return <Layout>
        {/*{//todo kim-doc react内联写法}*/}
        <style global="true" jsx="true">{`
                .layout-header{
                    padding: 0 20px;
                }

                .logo {
                height: 30px;
                margin: 16px 28px 0 0;
                float: left;
                display: flex;
                justify-content: start;
                align-items: center;
                }

                .logo img {
                    height: 35px;
                }

                .logo h1 {
                color: #fff;
                font-size: 16px;
                display: inline-block;
                vertical-align: middle;
                margin: 0 0 0 12px;
                font-weight: 400;
                }

                .layout-has-sider{
                    padding: 0px 0px !important;
                }

                .layout-sider-trigger {
                    height: 80px;
                    line-height: 80px;
                    background: #fff;
                }


                .kim-ant-back-top-inner {
                    height: 40px;
                    width: 40px;
                    line-height: 40px;
                    border-radius: 4px;
                    background-color: #1088e9;
                    color: #fff;
                    text-align: center;
                    font-size: 10px;
                    bottom: 100px;
                  }
                  .ant-layout-has-sider{
                    padding: 0px 0px !important
                  }

                  .ant-layout-sider-trigger{
                    opacity: 0;
                  }

                `}</style>

        <AntdHeader className="header">
          <Link to="/home">
            <div className="logo">
              <img src="/assets/logo-ant.svg" alt="LOGO" />
              <h1>Antd Bicycle</h1>
            </div>
          </Link>
          <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['/ui']} style={{ lineHeight: '64px' }} >
            {renderMenu(menuTreeData)}
          </Menu>
        </AntdHeader>

        <Content>
          <Layout style={{ padding: '24px 0', minHeight: '100vh' }}>
            <Sider
              collapsible
              collapsed={this.state.collapsed}
              onCollapse={collapsed => this.setState({ collapsed })}
              breakpoint="lg"
              width={234}
              collapsedWidth={80}
              style={{
                background: '#fff',
                // height: '100vh',
                // overflow: 'auto',
                // position: 'fixed',
                // left: 0,
              }}
            >
              {console.log(this.state.SelectedKeys, "this.state.SelectedKeys")}
              <Menu mode="inline" defaultSelectedKeys={this.state.SelectedKeys} defaultOpenKeys={this.state.SelectedKeys} style={{ minHeight: '100vh' }} >
                {menuFilterData[0].routes ? menuFilterData[0].routes.map(item =>
                  <Menu.Item title={item.name} key={item.path} >
                    <NavLink to={item.path} ><Icon type={item.icon} /><span>{item.name}</span></NavLink></Menu.Item>) :
                  <Menu.Item title={menuFilterData[0].name} key={menuFilterData[0].path} ><NavLink to={menuFilterData[0].path} ><Icon type={menuFilterData[0].icon} /><span>{menuFilterData[0].name}</span></NavLink></Menu.Item>
                }
                {/* <SubMenu key="1" title={<span><Icon type="user" />虚拟路由</span>} > {[10, 20, 30, 40, 60, 70, 80].map(item => <Menu.Item key={item}>虚拟路由{item}</Menu.Item>)} </SubMenu> */}
              </Menu>
            </Sider>

            <Content style={{ padding: '0 24px', minHeight: 280 }}>
              <Breadcrumb style={{ margin: '16px 0' }}>
                {/* {breadcrumbData.map(item => <Breadcrumb.Item> <Icon type={item} /> {item}</Breadcrumb.Item>)} */}
                <KimBreadcrumb />
              </Breadcrumb>

              {this.props.children}

              <Footer />
              {/* <BackTop style={{bottom:100}}>
                            <div className="kim-ant-back-top-inner">返回顶部</div>
                        </BackTop> */}
              <BackTop />
            </Content>
          </Layout>
        </Content>
      </Layout>
    }


    return <>
      {
        this.state.LayoutName == "0" && <Row className="container">
          <Col lg={{ span: 4 }} xl={{ span: 3 }} className="nav-left">
            <NavLeft />
          </Col>
          <Col lg={{ span: 20 }} xl={{ span: 21 }} className="main">
            <Header />
            <Row className="content">
              {this.props.children}
              <Footer />
            </Row>
          </Col>
        </Row>
      }

      {
        this.state.LayoutName == "1" && <Layout style={{ minHeight: "100vh" }}>
          <Sider
            collapsible collapsed={this.state.collapsed}
            onCollapse={collapsed => this.setState({ collapsed })}
            breakpoint="lg"
            width={256}
            collapsedWidth={0}>
            <NavLeft islogoTitleHide={this.state.collapsed} />
          </Sider>
          <Content lg={{ span: 20 }} xl={{ span: 21 }} className="main"
            style={{ padding: 24, background: '#fff', minHeight: 280, }}>
            <Header />
            <Row className="content">
              {this.props.children}
              <Footer />
            </Row>
          </Content>
        </Layout>
      }
      {
        this.state.LayoutName == "2" && < Layout style={{ minHeight: '100vh' }}>
          {/*    <style global jsx>{`*/}
          {/*   aside.layout-sider.layout-sider-dark.layout-sider-has-trigger {*/}
          {/*    min-width: 256px !important;*/}
          {/*    max-width: 300px !important;*/}
          {/*    width:100% !important;*/}
          {/*}*/}
          {/*     `}</style>*/}

          {/*/!*<Sider style={{ height: '100vh', overflow: 'auto', position: 'fixed', left: 0,}}>*!/ //todo kim-doc固定布局*/}
          <Sider
            collapsible collapsed={this.state.collapsed}
            onCollapse={collapsed => this.setState({ collapsed })}
            breakpoint="lg"
            width={256}
            collapsedWidth={80}

          >
            {/* 用来判断左侧logo处的标题是否隐藏 */}
            <NavLeft islogoTitleHide={this.state.collapsed} />
          </Sider>
          <Layout>
            <Header>
              <Icon
                className="trigger"
                type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
                onClick={() => this.setState({ collapsed: !this.state.collapsed })}
                style={{ fontSize: 22 }}
              />
            </Header>

            <Content style={{ margin: '0 16px' }}>
              {this.props.children}
            </Content>
            <Footer />
          </Layout>
        </Layout>
      }

      {
        this.state.LayoutName == "3" && dfkdfjdk()
      }
    </>

  }


  //----------------------------   自定义  ---------------------------------------

  // render() {
  //   return (
  //     <Row className="container">
  //       <Col lg={{ span: 4 }} xl={{ span: 3 }} className="nav-left">
  //         <NavLeft />
  //       </Col>
  //       <Col lg={{ span: 20 }} xl={{ span: 21 }} className="main">
  //         <Header />
  //         <Row className="content">
  //           {this.props.children}
  //           <Footer />
  //         </Row>
  //       </Col>
  //     </Row>
  //   );
  // }


  //----------------------------   //todo kim-stamp 根据antd改『改菜单』  ---------------------------------------


  // render() {
  //     return (
  //         <Layout style={{ minHeight: "100vh" }}>
  //             <Sider
  //                 collapsible collapsed={this.state.collapsed}
  //                 onCollapse={collapsed => this.setState({ collapsed })}
  //                 breakpoint="lg"
  //                 width={256}
  //                 collapsedWidth={0}>
  //                  <NavLeft islogoTitleHide={this.state.collapsed} />
  //             </Sider>
  //             <Content lg={{ span: 20 }} xl={{ span: 21 }} className="main"
  //                 style={{ padding: 24, background: '#fff', minHeight: 280, }}>
  //                 <Header />
  //                 <Row className="content">
  //                     {this.props.children}
  //                     <Footer />
  //                 </Row>
  //             </Content>
  //         </Layout>
  //     );
  // }


  // ------------------------------   自定义触发器  ------------------------------------

  // render() {
  //     return <Layout style={{minHeight: '100vh'}}>
  //         <Sider trigger={null} width={256} collapsible collapsed={this.state.collapsed}>
  //             <NavLeft islogoTitleHide={this.state.collapsed}/>
  //         </Sider>

  //         <Layout>
  //             <Header>
  //                 <Icon
  //                     className="trigger"
  //                     type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
  //                     onClick={() => this.setState({collapsed: !this.state.collapsed})}
  //                     style={{fontSize: 22}}

  //                 />
  //             </Header>
  //             <Content
  //                 style={{margin: '24px 16px', padding: 24, background: '#fff', minHeight: 280,}}>
  //                 {this.props.children}
  //             </Content>
  //             <Footer/>
  //         </Layout>
  //     </Layout>
  // }

  // -------------------------  侧边两列式布局。页面横向空间有限时，侧边导航可收起  ----------------------------

  // render() {
  //     return (
  //         <Layout style={{minHeight: '100vh'}}>
  //         {/*    <style global jsx>{`*/}
  //         {/*   aside.layout-sider.layout-sider-dark.layout-sider-has-trigger {*/}
  //         {/*    min-width: 256px !important;*/}
  //         {/*    max-width: 300px !important;*/}
  //         {/*    width:100% !important;*/}
  //         {/*}*/}
  //         {/*     `}</style>*/}

  //             {/*/!*<Sider style={{ height: '100vh', overflow: 'auto', position: 'fixed', left: 0,}}>*!/ //todo kim-doc固定布局*/}
  //             <Sider
  //                     collapsible collapsed={this.state.collapsed}
  //                     onCollapse={collapsed => this.setState({collapsed})}
  //                     breakpoint="lg"
  //                     width={256}
  //                     collapsedWidth={80}

  //             >
  //                 {/* 用来判断左侧logo处的标题是否隐藏 */}
  //                 <NavLeft islogoTitleHide={this.state.collapsed} />
  //             </Sider>
  //             <Layout>
  //                 <Header>
  //                     <Icon
  //                         className="trigger"
  //                         type={this.state.collapsed ? 'menu-unfold' : 'menu-fold'}
  //                         onClick={() => this.setState({collapsed: !this.state.collapsed})}
  //                         style={{fontSize: 22}}
  //                     />
  //                 </Header>

  //                 <Content style={{margin: '0 16px'}}>
  //                     {this.props.children}
  //                 </Content>
  //                 <Footer/>
  //             </Layout>
  //         </Layout>
  //     );
  // }

  // -----------------------------   最基本的『上-中-下』布局  --------------------------------------


  // render() {
  //   const { breadcrumbData } = this.state
  //   let menuFilterData = menuTreeData.filter(item => item.path == "/" + this.state.breadcrumbData[0])
  //   const renderMenu = (menudata) => {
  //     return menudata.map((item) => {
  //       //     //头部鼠标悬停 『无下拉』
  //       // return <Menu.Item title={item.name}
  //       //     onClick={(e) => this.setState({ firstLevelPath: item.routes ? item.routes[0].path : item.path })}
  //       //     key={item.path} >
  //       //     <NavLink to={item.routes ? item.routes[0].path : item.path}>{item.routes ? <Icon type={item.icon} /> : null} <span>{item.name}</span></NavLink>
  //       // </Menu.Item>

  //       //头部鼠标悬停 『下拉』
  //       if (item.hideInMenu) return null;
  //       return !item.routes ?
  //         <Menu.Item title={item.name} key={item.path} ><NavLink to={item.path}><span>{item.name}</span></NavLink></Menu.Item> :
  //         <SubMenu onTitleClick={(e) => { this.setState({ firstLevelPath: e.key }) }} title={<span> <Icon type={item.icon} />
  //           <Link to={item.routes[0].path} style={{ color: 'rgba(255, 255, 255, 0.65)' }}>{item.name}</Link></span>} key={item.path}>
  //           {renderMenu(item.routes)}
  //         </SubMenu>
  //     })
  //   }

  //   return <Layout>
  //     {/*{//todo kim-doc react内联写法}*/}
  //     <style global="true" jsx="true">{`
  //             .layout-header{
  //                 padding: 0 20px;
  //             }

  //             .logo {
  //             height: 30px;
  //             margin: 16px 28px 0 0;
  //             float: left;
  //             display: flex;
  //             justify-content: start;
  //             align-items: center;
  //             }

  //             .logo img {
  //                 height: 35px;
  //             }

  //             .logo h1 {
  //             color: #fff;
  //             font-size: 16px;
  //             display: inline-block;
  //             vertical-align: middle;
  //             margin: 0 0 0 12px;
  //             font-weight: 400;
  //             }

  //             .layout-has-sider{
  //                 padding: 0px 0px !important;
  //             }

  //             .layout-sider-trigger {
  //                 height: 80px;
  //                 line-height: 80px;
  //                 background: #fff;
  //             }


  //             .kim-ant-back-top-inner {
  //                 height: 40px;
  //                 width: 40px;
  //                 line-height: 40px;
  //                 border-radius: 4px;
  //                 background-color: #1088e9;
  //                 color: #fff;
  //                 text-align: center;
  //                 font-size: 10px;
  //                 bottom: 100px;
  //               }
  //               .ant-layout-has-sider{
  //                 padding: 0px 0px !important
  //               }

  //               .ant-layout-sider-trigger{
  //                 opacity: 0;
  //               }

  //             `}</style>

  //     <AntdHeader className="header">
  //       <Link to="/home">
  //         <div className="logo">
  //           <img src="/assets/logo-ant.svg" alt="LOGO" />
  //           <h1>Antd Bicycle</h1>
  //         </div>
  //       </Link>
  //       <Menu theme="dark" mode="horizontal" defaultSelectedKeys={['/ui']} style={{ lineHeight: '64px' }} >
  //         {renderMenu(menuTreeData)}
  //       </Menu>
  //     </AntdHeader>

  //     <Content>
  //       <Layout style={{ padding: '24px 0', minHeight: '100vh' }}>
  //         <Sider
  //           collapsible
  //           collapsed={this.state.collapsed}
  //           onCollapse={collapsed => this.setState({ collapsed })}
  //           breakpoint="lg"
  //           width={234}
  //           collapsedWidth={80}
  //           style={{
  //             background: '#fff',
  //             // height: '100vh',
  //             // overflow: 'auto',
  //             // position: 'fixed',
  //             // left: 0,
  //           }}
  //         >
  //           {console.log(this.state.SelectedKeys, "this.state.SelectedKeys")}
  //           <Menu mode="inline" defaultSelectedKeys={this.state.SelectedKeys} defaultOpenKeys={this.state.SelectedKeys} style={{ minHeight: '100vh' }} >
  //             {menuFilterData[0].routes ? menuFilterData[0].routes.map(item =>
  //               <Menu.Item title={item.name} key={item.path} >
  //                 <NavLink to={item.path} ><Icon type={item.icon} /><span>{item.name}</span></NavLink></Menu.Item>) :
  //               <Menu.Item title={menuFilterData[0].name} key={menuFilterData[0].path} ><NavLink to={menuFilterData[0].path} ><Icon type={menuFilterData[0].icon} /><span>{menuFilterData[0].name}</span></NavLink></Menu.Item>
  //             }
  //             {/* <SubMenu key="1" title={<span><Icon type="user" />虚拟路由</span>} > {[10, 20, 30, 40, 60, 70, 80].map(item => <Menu.Item key={item}>虚拟路由{item}</Menu.Item>)} </SubMenu> */}
  //           </Menu>
  //         </Sider>

  //         <Content style={{ padding: '0 24px', minHeight: 280 }}>
  //           <Breadcrumb style={{ margin: '16px 0' }}>
  //             {/* {breadcrumbData.map(item => <Breadcrumb.Item> <Icon type={item} /> {item}</Breadcrumb.Item>)} */}
  //             <KimBreadcrumb />
  //           </Breadcrumb>

  //           {this.props.children}

  //           <Footer />
  //           {/* <BackTop style={{bottom:100}}>
  //                         <div className="kim-ant-back-top-inner">返回顶部</div>
  //                     </BackTop> */}
  //           <BackTop />
  //         </Content>
  //       </Layout>
  //     </Content>
  //   </Layout>
  // }


}

export default withRouter(BasicLayout)


// Layout 布局容器。
// 参数                         说明    类型    默认值    版本
// className                    容器 className    string    -
// hasSider                     表示子元素里有 Sider，一般不用指定。可用于服务端渲染时避免样式闪动    boolean    -    3.2.0
// style                        指定样式    object    -
// :::tip Layout.Header Layout.Footer Layout.Content API 与 Layout 相同


// Layout.Sider 侧边栏
// 参数	                        说明	类型	默认值	版本
// mode                         //todo kim-doc 侧边菜单栏模式选择   string "horizontal"|"inline"|vertical  【顶部-侧边布局： 用'horizontal'】 【 侧边用： 'inline（鼠标移入悬停）'或者'horizontal(下拉风格，推荐使用)'】
// className	                  容器 className	string	-
// collapsed	                  当前收起状态	boolean	-
// breakpoint	                  触发响应式布局的断点	Enum { 'xs', 'sm', 'md', 'lg', 'xl', 'xxl' }
// collapsedWidth	              //todo kim-doc 配置 breakpoint 属性即生效，视窗宽度小于 breakpoint 时 Sider 缩小为 collapsedWidth 宽度，若将 collapsedWidth 设置为零，会出现特殊 trigger	number	80
// defaultOpenKeys	            //todo kim-doc  初始展开的 SubMenu 菜单项 key 数组	string[]		
// defaultSelectedKeys	        //todo kim-doc  初始选中的菜单项 key 数组	string[]		
// collapsible	                是否可收起	boolean	false
// defaultCollapsed	            是否默认收起	boolean	false
// reverseArrow	                翻转折叠提示箭头的方向，当 Sider 在右边时可以使用	boolean	false
// style	                      指定样式	object	-
// theme	                      主题颜色	string: light dark	dark	3.6.0
// trigger	                    自定义 trigger，设置为 null 时隐藏 trigger	string|ReactNode	-
// width	                      宽度	number|string	200
// onCollapse	                  展开-收起时的回调函数，有点击 trigger 以及响应式反馈两种方式可以触发	(collapsed, type) => {}	-
// onBreakpoint	                触发响应式布局断点时的回调	(broken) => {}	-	3.7.0

// breakpoint width#
// {
//     xs: '480px',
//     sm: '576px',
//     md: '768px',
//     lg: '992px',
//     xl: '1200px',
//     xxl: '1600px',
// }


// <BackTop />
// 参数	                    说明	类型	默认值	版本
// target	                  设置需要监听其滚动事件的元素，值为一个返回对应 DOM 元素的函数	Function	() => window
// visibilityHeight	        滚动高度达到此参数值才出现 BackTop	number	400
// onClick	                点击按钮的回调函数	Function	-

